<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>车位记录</span>
                </h3>
                <span class="m-section__sub">
                    <span>
                        <button
                            pButton
                            type="button"
                            label="新增用户车位"
                            class="ui-button-success"
                            (click)="
                                createOrEditUserPlaceModal.show(
                                    userid,
                                    parkingID
                                )
                            "
                        ></button>
                    </span>
                </span>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <!-- begin::Card-->
                <div class="card card-custom overflow-hidden">
                    <div class="card-body p-0">
                        <!-- begin: Invoice-->
                        <!-- begin: Invoice header-->
                        <div
                            class="
                                row
                                justify-content-center
                                py-8
                                px-8
                                py-md-27
                                px-md-0
                            "
                        >
                            <div class="col-md-12">
                                <div
                                    class="
                                        d-flex
                                        justify-content-between
                                        pb-10 pb-md-20
                                        flex-column flex-md-row
                                    "
                                >
                                    <h3
                                        class="
                                            display-4
                                            font-weight-boldest
                                            mb-10
                                        "
                                    ></h3>
                                    <div
                                        class="
                                            d-flex
                                            flex-column
                                            align-items-md-end
                                            px-0
                                        "
                                    >
                                        <!--begin::Logo-->
                                        <!-- <a href="#" class="mb-5">
                                            <img
                                                src="/metronic/theme/html/demo1/dist/assets/media/logos/logo-dark.png"
                                                alt=""
                                            />
                                        </a> -->
                                        <!--end::Logo-->

                                        <button
                                            type="button"
                                            class="
                                                btn btn-primary
                                                font-weight-bold
                                            "
                                        >
                                            <span
                                                class="
                                                    d-flex
                                                    flex-column
                                                    align-items-md-end
                                                    opacity-70
                                                "
                                            >
                                                <span> {{ name }}</span>
                                                <span
                                                    >{{ neighbourhoodName
                                                    }}{{ address }}</span
                                                >
                                                <span>{{ phone }}</span>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="border-bottom w-100"></div>
                            </div>
                        </div>
                        <!-- end: Invoice header-->
                        <!-- begin: Invoice body-->

                        <div
                            class="
                                row
                                justify-content-center
                                bg-gray-100
                                py-8
                                px-8
                                py-md-10
                                px-md-0
                            "
                        >
                            <div class="col-md-12">
                                <div class="d-flex justify-content-between">
                                    <button
                                        type="button"
                                        class="btn btn-primary font-weight-bold"
                                    >
                                        车位记录
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div
                            class="
                                row
                                justify-content-center
                                py-8
                                px-8
                                py-md-10
                                px-md-0
                            "
                        >
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <!-- <table class="table">
                                        <thead>
                                            <tr>
                                                <th
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    Description
                                                </th>
                                                <th
                                                    class="
                                                        text-right
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    Hours
                                                </th>
                                                <th
                                                    class="
                                                        text-right
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    Rate
                                                </th>
                                                <th
                                                    class="
                                                        text-right
                                                        pr-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    Amount
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="font-weight-boldest">
                                                <td class="pl-0 pt-7">
                                                    Creative Design
                                                </td>
                                                <td class="text-right pt-7">
                                                    80
                                                </td>
                                                <td class="text-right pt-7">
                                                    $40.00
                                                </td>
                                                <td
                                                    class="
                                                        text-danger
                                                        pr-0
                                                        pt-7
                                                        text-right
                                                    "
                                                >
                                                    $3200.00
                                                </td>
                                            </tr>
                                            <tr
                                                class="
                                                    font-weight-boldest
                                                    border-bottom-0
                                                "
                                            >
                                                <td
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    Front-End Development
                                                </td>
                                                <td
                                                    class="
                                                        border-top-0
                                                        text-right
                                                        py-4
                                                    "
                                                >
                                                    120
                                                </td>
                                                <td
                                                    class="
                                                        border-top-0
                                                        text-right
                                                        py-4
                                                    "
                                                >
                                                    $40.00
                                                </td>
                                                <td
                                                    class="
                                                        text-danger
                                                        border-top-0
                                                        pr-0
                                                        py-4
                                                        text-right
                                                    "
                                                >
                                                    $4800.00
                                                </td>
                                            </tr>
                                            <tr
                                                class="
                                                    font-weight-boldest
                                                    border-bottom-0
                                                "
                                            >
                                                <td
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    Back-End Development
                                                </td>
                                                <td
                                                    class="
                                                        border-top-0
                                                        text-right
                                                        py-4
                                                    "
                                                >
                                                    210
                                                </td>
                                                <td
                                                    class="
                                                        border-top-0
                                                        text-right
                                                        py-4
                                                    "
                                                >
                                                    $60.00
                                                </td>
                                                <td
                                                    class="
                                                        text-danger
                                                        border-top-0
                                                        pr-0
                                                        py-4
                                                        text-right
                                                    "
                                                >
                                                    $12600.00
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table> -->

                                    <p-table [value]="UserPlaceLis">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th
                                                    style="
                                                        width: 13%;
                                                        text-align: center;
                                                    "
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    车位名称
                                                </th>
                                                <th
                                                    style="
                                                        width: 25%;
                                                        text-align: center;
                                                    "
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    车位编号
                                                </th>
                                                <th
                                                    style="
                                                        width: 13%;
                                                        text-align: center;
                                                    "
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    车位状态
                                                </th>
                                                <th
                                                    style="
                                                        width: 13%;
                                                        text-align: center;
                                                    "
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    到期时间
                                                </th>
                                                <th
                                                    style="
                                                        width: 18%;
                                                        text-align: center;
                                                    "
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    车辆牌照
                                                </th>
                                                <th
                                                    style="
                                                        width: 18%;
                                                        text-align: center;
                                                    "
                                                    class="
                                                        pl-0
                                                        font-weight-bold
                                                        text-muted
                                                        text-uppercase
                                                    "
                                                >
                                                    操作
                                                </th>
                                            </tr>
                                        </ng-template>
                                        <ng-template
                                            pTemplate="body"
                                            let-UserPlaceLis
                                        >
                                            <tr>
                                                <td
                                                    style="text-align: center"
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    {{ UserPlaceLis.placeName }}
                                                </td>
                                                <td
                                                    style="text-align: center"
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    {{ UserPlaceLis.placeNo }}
                                                </td>
                                                <td
                                                    style="text-align: center"
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    <span
                                                        *ngIf="
                                                            UserPlaceLis.placeSatus ==
                                                            0
                                                        "
                                                        class="
                                                            m-badge
                                                            m-badge--success
                                                            m-badge--wide
                                                        "
                                                    >
                                                        空闲
                                                    </span>
                                                    <span
                                                        *ngIf="
                                                            UserPlaceLis.placeSatus ==
                                                            1
                                                        "
                                                        class="
                                                            m-badge
                                                            m-badge--danger
                                                            m-badge--wide
                                                        "
                                                    >
                                                        占用
                                                    </span>
                                                </td>
                                                <td
                                                    style="text-align: center"
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    {{
                                                        UserPlaceLis.endTime
                                                            | momentFormat
                                                                : "YYYY-MM-DD"
                                                    }}
                                                </td>
                                                <td
                                                    style="text-align: center"
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >                                                   
                                                    <label *ngFor="let car of UserPlaceLis.carNums; let key = index;">
                                                        <span *ngIf="key!=0">,</span>
                                                        <a title="点击删除车辆信息" (click)="deleteUserParkingInfo(car,UserPlaceLis)"> {{car.carNum}}</a>
                                                    </label>
                                                </td>
                                                <td
                                                    style="text-align: center"
                                                    class="
                                                        border-top-0
                                                        pl-0
                                                        py-4
                                                    "
                                                >
                                                    <button
                                                        pButton
                                                        type="button"
                                                        label="新增车辆"
                                                        class="
                                                            ui-button-rounded
                                                            ui-button-warning
                                                        "
                                                        icon="fa fa-edit"
                                                        style="
                                                            margin-bottom: 0.5em;
                                                        "
                                                        (click)="
                                                            createOrEditAddlicenseModal.show(
                                                                UserPlaceLis,
                                                                userid
                                                            )
                                                        "
                                                    ></button>

                                                    <button
                                                        pButton
                                                        type="button"
                                                        label="车位续费"
                                                        class="
                                                            ui-button-rounded
                                                            ui-button-success
                                                        "
                                                        icon="fa fa-edit"
                                                        style=""
                                                        (click)="
                                                            createOrEditRenewPlaceModal.show(
                                                                UserPlaceLis,
                                                                userid
                                                            )
                                                        "
                                                    ></button>
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                </div>
                            </div>
                        </div>
                        <!-- end: Invoice body-->
                        <!-- begin: Invoice footer-->
                    </div>
                    <!-- end::Card-->
                </div>
                <!--end::Container-->
            </div>
        </div>
    </div>
    <createOrEditAddlicenseModal
        #createOrEditAddlicenseModal
        (modalSave)="getUserParking()"
    ></createOrEditAddlicenseModal>
    <createOrEditRenewPlaceModal
        #createOrEditRenewPlaceModal
        (modalSave)="getUserParking()"
    ></createOrEditRenewPlaceModal>
    <createOrEditUserPlaceModal
        #createOrEditUserPlaceModal
        (modalSave)="getUserParking()"
    ></createOrEditUserPlaceModal>
</div>
